import React from "react";
import { Link } from "react-router-dom";
import "./calendar.scss";
function Calendar() {
  return (
    <div className="home-main app">
      {/* 顶部 */}
      <p className="top flex aic jc-c">选择日期</p>
      {/* 填充 */}
      <p className="empty"></p>
      {/* 年月 */}
      <p className="date bg-fff flex aic jc-c">4月, 2022</p>
      {/* 星期列表 */}
      <ul className="weeklist flex jc-sa aic bg-fff">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
        <li>日</li>
      </ul>
      {/* 日期价格列表 */}
      <ul className="priceList bg-fff fww flex jc-sa">
        <li className="priceItem f999">1</li>
        <li className="priceItem f999">2</li>
        <li className="priceItem f999">3</li>
        <li className="priceItem f999">4</li>
        <li className="priceItem f999">5</li>
        <li className="priceItem f999">6</li>
        <li className="priceItem f999">7</li>
        <li className="priceItem f999">8</li>
        <li className="priceItem f999">9</li>
        <li className="priceItem f999">10</li>
        <li className="priceItem f999">11</li>
        <li className="priceItem f999">12</li>
        <li className="priceItem f999">13</li>
        <li className="priceItem flex fdc jc-c aic">
          <span>14</span>
          <span>&yen;2118</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>15</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>16</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>17</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>18</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>19</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>20</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>21</span>
          <span>&yen;2118</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>22</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>23</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>24</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>25</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>26</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>27</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>28</span>
          <span>&yen;2118</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>29</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>30</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
      </ul>

      {/* 5月份 */}
      <p className="date bg-fff flex aic jc-c">5月, 2022</p>
      {/* 星期列表 */}
      <ul className="weeklist flex jc-sa aic bg-fff">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
        <li>日</li>
      </ul>
      {/* 日期价格列表 */}
      <ul className="priceList bg-fff fww flex jc-sa">
        <li className="priceItem flex fdc jc-c aic">
          <span>1</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>2</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>3</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>4</span>
          <span>&yen;2118</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>5</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>6</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>7</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>8</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>9</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>10</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>11</span>
          <span>&yen;2118</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>12</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>13</span>
          <span>&yen;1648</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>14</span>
          <span>&yen;2118</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>15</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>16</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>17</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>18</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>19</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>20</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>21</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>22</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>23</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>24</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>25</span>
          <span>&yen;2118</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>26</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>27</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>28</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>29</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>30</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>31</span>
          <span>&yen;1648</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
      </ul>

      {/* 6月份 */}
      <p className="date bg-fff flex aic jc-c">6月, 2022</p>
      {/* 星期列表 */}
      <ul className="weeklist flex jc-sa aic bg-fff">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
        <li>日</li>
      </ul>
      {/* 日期价格列表 */}
      <ul className="priceList bg-fff fww flex jc-sa">
        <li className="priceItem flex fdc jc-c aic f999">
          <span>1</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>2</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>3</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>4</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>5</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>6</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic f999">
          <span>7</span>
          <span>满房</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>8</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>9</span>
          <span>&yen;2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>10</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>11</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>12</span>
          <span>&yen;2424</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>13</span>
          <span>&yen;2424</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>14</span>
          <span>&yen;2424</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>15</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>16</span>
          <span>&yen;2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>17</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>18</span>
          <span>2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>19</span>
          <span>2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>20</span>
          <span>2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>21</span>
          <span>2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>22</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>23</span>
          <span>&yen;2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>24</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>25</span>
          <span>&yen;2118</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>26</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>27</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>28</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>29</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>30</span>
          <span>2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
      </ul>

      {/* 7月份 */}
      <p className="date bg-fff flex aic jc-c">7月, 2022</p>
      {/* 星期列表 */}
      <ul className="weeklist flex jc-sa aic bg-fff">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
        <li>日</li>
      </ul>
      {/* 日期价格列表 */}
      <ul className="priceList bg-fff fww flex jc-sa">
        <li className="priceItem flex fdc jc-c aic">
          <span>1</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>2</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>3</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>4</span>
          <span>&yen;2118</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>5</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>6</span>
          <span>&yen;2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>7</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>8</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>9</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>10</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>11</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>12</span>
          <span>&yen;2424</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>13</span>
          <span>&yen;2777</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>14</span>
          <span>&yen;2424</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>15</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>16</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>17</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>18</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>19</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>20</span>
          <span>&yen;2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>21</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>22</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>23</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>24</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>25</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>26</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>27</span>
          <span>&yen;2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>28</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>29</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>30</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>31</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
      </ul>

      {/* 8月份 */}
      <p className="date bg-fff flex aic jc-c">8月, 2022</p>
      {/* 星期列表 */}
      <ul className="weeklist flex jc-sa aic bg-fff">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
        <li>日</li>
      </ul>
      {/* 日期价格列表 */}
      <ul className="priceList bg-fff fww flex jc-sa">
        <li className="priceItem flex fdc jc-c aic ">
          <span>1</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>2</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>3</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>4</span>
          <span>&yen;2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>5</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>6</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>7</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>8</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>9</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>10</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>11</span>
          <span>&yen;2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>12</span>
          <span>&yen;2424</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>13</span>
          <span>&yen;2424</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>14</span>
          <span>&yen;2424</span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span>15</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>16</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>17</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>18</span>
          <span>&yen;2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>19</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>20</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>21</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic ">
          <span>22</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>23</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>24</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>25</span>
          <span>&yen;2777</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>26</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>27</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>28</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>29</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span>30</span>
          <span>&yen;2424</span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>

        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
        <li className="priceItem flex fdc jc-c aic">
          <span></span>
          <span></span>
        </li>
      </ul>
      {/* 底部 */}
      <footer className="under mt-15">
        <Link to="/home/submitOrders">
          <button className="btn">确定</button>
        </Link>
      </footer>
    </div>
  );
}

export default Calendar;
